@charset "UTF-8";
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td


{
  margin:0;
  padding:0
}
fieldset,img{
  border:0
}
:focus{
  outline:0
}
address,caption,cite,code,dfn,em,strong,th,var,optgroup{
  font-style:normal;
  font-weight:400
}
h1,h2,h3,h4,h5,h6{
  font-size:100%;
  font-weight:400
}
abbr,acronym{
  border:0;
  font-variant:normal
}
code,kbd,samp,tt{
  font-size:100%
}
input,button,textarea,select{
  *font-size:100%;
  border:0
}
body{
  background:#fff;
  color:#5e5e5e;
  font:14px/2em Microsoft YaHei,SimSun,Arial
}
ol,ul{
  list-style:none
}
table{
  border-collapse:collapse;
  border-spacing:0
}
caption,th{
  text-align:left
}
sup,sub{
  font-size:100%;
  vertical-align:baseline
}
:link,:visited,ins{
  text-decoration:none
}
blockquote,q{
  quotes:none
}
blockquote:before,blockquote:after,q:before,q:after{
  content:'';
  content:none
}
a:link,a:visited{
  color:#5e5e5e
}
a:hover{
  color:#c9394a
}
a:active{
  color:#666
}
.clearfix:after{
  content:'\0020';
  display:block;
  height:0;
  clear:both;
  visibility:hidden
}
.clearfix{*zoom:1}
.l{float:left}
.r{float:right}
.clear{
  height:0;
  overflow:hidden;
  clear:both
}
.hide{display:none}
.btn.hide{display:none}
a.hidefocus{outline:0}
button.hidefocus::-moz-focus-inner{border:0}
a:focus{
  outline:0;
  -moz-outline:0
}
input,textarea{outline:0}
h2{font-size:20px}
h3{
  font-size:16px;
  line-height:32px
}
h5{
  font-size:14px;
  line-height:28px
}
.img_border{
  border:4px solid #fff;
  border-radius:1px
}
.bb{border-bottom:1px solid #d2d2d2}
.bt{border-top:1px solid #d2d2d2}
.bbn{border-bottom:0!important}
.mc{margin:0 auto!important}
.m0{margin:0!important}
.m1{margin:1px!important}
.m2{margin:2px!important}
.m3{margin:3px!important}
.m4{margin:4px!important}
.m5{margin:5px!important}
.m10{margin:10px}
.m15{margin:15px}
.m20{margin:20px}
.m25{margin:25px}
.m30{margin:30px}
.mt5{margin-top:5px!important}
.mt0{margin-top:0!important}
.mt10{margin-top:10px!important}
.mt14{margin-top:14px}
.mt15{margin-top:15px}
.mt18{margin-top:18px}
.mt20{margin-top:20px!important}
.mt30{margin-top:30px}
.mt40{margin-top:40px}
.mt50{margin-top:50px}
.mt60{margin-top:60px}
.mt70{margin-top:70px}
.mt80{margin-top:80px}
.mt90{margin-top:90px}
.mt100{margin-top:100px}
.mb0{margin-bottom:0!important}
.mb3{margin-bottom:3px}
.mb5{margin-bottom:5px!important}
.mb10{margin-bottom:10px}
.mb15{margin-bottom:15px}
.mb20{margin-bottom:20px!important}
.mb25{margin-bottom:25px!important}
.mb30{margin-bottom:30px}
.mb40{margin-bottom:40px}
.mb50{margin-bottom:50px}
.mb55{margin-bottom:55px}
.mb80{margin-bottom:80px}
.mb100{margin-bottom:100px}
.ml0{margin-left:0!important}
.ml8{margin-left:8px!important}
.ml1{margin-left:1px!important}
.ml5{margin-left:5px!important}
.ml10{margin-left:10px!important}
.ml12{margin-left:12px!important}
.ml13{margin-left:13px!important}
.ml15{margin-left:15px!important}
.ml25{margin-left:25px!important}
.ml20{margin-left:20px!important}
.ml30{margin-left:30px!important}
.ml35{margin-left:35px!important}
.ml38{margin-left:38px!important}
.ml40{margin-left:40px!important}
.ml50{margin-left:50px!important}
.ml60{margin-left:60px!important}
.ml55{margin-left:55px!important}
.ml57{margin-left:57px!important}
.ml60{margin-left:60px!important}
.ml80{margin-left:80px!important}
.ml100{margin-left:100px!important}
.ml110{margin-left:110px!important}
.ml120{margin-left:120px!important}
.ml150{margin-left:150px!important}
.ml200{margin-left:200px!important}
.ml250{margin-left:250px!important}
.ml285{margin-left:285px!important}
.ml835{margin-left:835px!important}
.mr5{margin-right:5px!important}
.mr10{margin-right:10px!important}
.mr15{margin-right:15px!important}
.mr20{margin-right:20px!important}
.mr30{margin-right:30px!important}
.mr40{margin-right:40px!important}
.mr50{margin-right:50px!important}
.mr80{margin-right:80px!important}
.mr100{margin-right:100px!important}
.mr250{margin-right:250px!important}
.mr300{margin-right:300px!important}
.pointer{cursor:pointer}
.color-gray,a.color-gray:link,a.color-gray:visited{color:#b7bcc0}
.color-white{color:#fff!important}
.color-blue{color:#088bd3}
.fl{float:left}
.fr{float:right}
.mr60{margin-right:60px}
.color-red{color:#EF1300!important}
.pr{position:relative}
.pa{position:absolute}
.errorHint{
  height:25px;
  line-height:20px;
  font-size:12px;
  color:#f01414
}
.breakall{word-break:break-all}
.wui-dialog{
  background-color:#fff;
  box-shadow:#ccc 1px 4px 20px 3px;
  position:absolute;
  box-shadow:0 12px 24px 0 rgba(0,0,0,.24)
}
.cb{clear:both}
.fs12{font-size:12px!important}
.fs14{font-size:14px!important}
.fs16{font-size:16px!important}
.fs18{font-size:18px!important}
.fs20{font-size:20px!important}
.bold{font-weight:700!important}
a:link,a:visited,body,html{color:#14191e}
.container,.newcontainer,.page-container,.waper{
  width:1200px;
  margin:0 auto
}
#nav,.container,.waper{margin:0 auto}
.header-app a,.header-signin a,.header-signup a,.logo a{
  -webkit-transition:background-color .2s;
  -moz-transition:background-color .2s
}
.search-area .search-area-result li,.text-ellipsis{
  text-overflow:ellipsis;
  white-space:nowrap
}
#logo a,.btn,.hide-text,.logo a,.text-ellipsis{white-space:nowrap}
body,html{font:14px/1.5 "PingFang SC","微软雅黑","Microsoft YaHei",Helvetica,"Helvetica Neue",Tahoma,Arial,sans-serif}
body{
  overflow-y:scroll;
  min-width:1200px;
  background-color:#edeff0
}
a:active,a:hover{color:#ec1500}
.clearfix:after{
  content:'\0020';
  display:block;
  height:0;
  clear:both;
  visibility:hidden
}
.l{float:left}
.r{float:right}
.logo,.nav-item li{float:left}
.hide{display:none}
.hide-text{
  text-indent:100%;
  overflow:hidden
}
#main{
  min-height:750px;
  padding:20px 0
}
.shadow{
  -webkit-box-shadow:0 2px 4px rgba(0,0,0,.1);
  -moz-box-shadow:0 2px 4px rgba(0,0,0,.1);
  box-shadow:0 2px 4px rgba(0,0,0,.1)
}
.text-ellipsis{
  overflow:hidden
}
#header{
  background:#000
}
#header{
  padding-top:10px;
  height:70px;
  background:#fff
}
#header .app-down-area a{
  display:block;
  padding:0 8px;
  height:60px;
  line-height:60px;
  color:#fff
}
#header .app-down-area a:hover{
  color:#fff;
  background-color:#363c41
}
#header .app-down-area a:hover{
  color:#93999f
}
#header .app-down-area a:hover i{
  background-position:0 -16px
}
#nav{
  width:auto;
  padding-right:20px;
  height:60px;
  position:relative;
  z-index:1000
}
#logo{
  margin:0 20px
}
#logo a,.logo a{
  display:block;
  height:60px;
  width:140px;
  background:url(/static/img/common/logo.png?t=2.3) center center no-repeat;
  text-indent:100%;overflow:hidden
}
.logo a{transition:background-color .2s}
.logo a:hover{background-color:#363c41}
.bindHintBox{
  background-color:#ffc;
  box-shadow:0 8px 16px 0 rgba(0,0,0,.2);
  position:absolute;
  right:10px;
  top:60px;
  width:313px;
  height:54px;
  z-index:3;
  font-size:12px;
  line-height:54px;
  color:#07111b;
  padding:0 15px
}
.bindHintBox .closeBindHint{
  width:17px;
  height:17px;
  position:relative;
  top:4px;
  left:20px;
  cursor:pointer;
  background:url(/static/img/nlogin.png) no-repeat;
  transition:transform .2s;
  -webkit-transition:transform .2s;
  -moz-transition:transform .2s;
  -o-transition:transform .2s
}
.nav-item a,.search-area .search-input{
  -webkit-transition:background-color .3s;
  -moz-transition:background-color .3s
}
.bindHintBox .arrow{
  position:absolute;
  right:15px;top:-10px;
  border-width:0 10px 10px;
  border-color:transparent transparent #ffc;
  border-style:solid
}
.linkToMall{
  font-size:12px!important;
  color:#fff!important;
  opacity:1!important
}
.nav-item a{
  position:relative;
  padding:0 25px;
  display:block;
  color:#fff;
  text-align:center;
  font-size:14px;
  height:60px;
  line-height:60px;
  transition:background-color .3s
}
.nav-item .active a,.nav-item a.active,.nav-item a:hover{color:#fff;background-color:rgba(77,85,93,.4)}
.nav-item a .icn-new{
  position:relative;
  display:inline-block;
  top:-10px;width:16px;
  height:16px;
  background:url(/static/img/common/new.png) no-repeat
}
.header-app-icon{
  display:inline-block;
  width:11px;
  height:16px;
  background:url(/static/img/head-app-icon.png) no-repeat;
  vertical-align:-3px;
  margin-right:5px;
  transition:.3s;
  -moz-transition:.3s;
  -webkit-transition:.3s;
  -o-transition:.3s
}
.set_btn img,select{vertical-align:middle}
.remind_warp{
  width:60px;
  height:60px;
  position:relative
}
.remind_warp .msg_remind{
  display:none;
  position:absolute;
  width:8px;
  height:8px;
  background-color:#f01414;
  right:14px;
  top:14px;
  border-radius:50%
}
.remind_warp .icon-notifi,.search-warp i{
  display:block;
  font-size:22px;
  line-height:60px;
  cursor:pointer
}
.remind_warp .icon-notifi{
  text-align:center;
  transition:color .2s
}
.remind_warp .icon-notifi:hover{color:#fff!important}
.search-warp{
  float:right;
  position:relative;
  margin-right:18px
}
.search-warp i{
  width:30px;
  height:60px;
  color:#757a7e
}
.search-warp i:hover{color:#fff}
.search-warp .showhide-search{
  width:30px;
  height:60px;
  line-height:60px;
  text-align:right;
  position:absolute;
  display:inline-block;
  right:0;top:0
}
.search-warp .searchTags{
  z-index:100;
  left:0;
  top:20px
}
.search-warp .searchTags a{
  padding:5px 8px;
  color:#93999f;
  background-color:#2b333b
}
.search-area{
  float:right;
  position:relative;
  height:38px;
  width:210px;
  margin:10px 0;
  padding-right:30px;
  border:1px solid #000;
  border-bottom-color:rgba(120,125,130,.8);
  zoom:1;
  -webkit-transition:width .3s;
  -moz-transition:width .3s;
  transition:width .3s
}
.search-area.min{width:0;border-color:#000}
.search-area .search-input{
  padding:5px 10px;
  width:100%;
  height:38px;
  line-height:38px;
  font-size:12px;
  float:left;
  border:0;
  color:#fff;
  transition:background-color .3s;
  background-color:#000;
  -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box;
  -ms-box-sizing:border-box;
  box-sizing:border-box
}
.search-area .search-input:-moz-placeholder{color:#787d82}
.search-area .search-input::-moz-placeholder{color:#787d82;opacity:1}
.search-area .search-input:-ms-input-placeholder{color:#787d82}
.search-area .search-input::-webkit-input-placeholder{color:#787d82}
.search-area .search-input.placeholder{color:#787d82}
.search-area .btn_search{
  float:left;
  cursor:pointer;
  width:30px;
  height:38px;
  text-align:center;
  -webkit-transition:background-color .3s;
  -moz-transition:background-color .3s;
  transition:background-color .3s
}
.search-area .search-area-result{
  position:absolute;
  left:0;
  top:41px;
  width:238px;
  margin-bottom:20px;
  border:1px solid #d3d3d3;
  border-top:none;
  background-color:#fff;
  box-shadow:0 4px 8px rgba(0,0,0,.35);
  font-size:12px;
  overflow:hidden;
  display:none;
  z-index:1000
}
#login-area,.header-app{position:relative}
.search-area .search-area-result li{
  height:40px;
  line-height:40px;
  padding:0 10px;
  overflow:hidden;
  color:#787d82;
  cursor:pointer
}
.search-area .search-area-result .light,.search-area .search-area-result li:hover{
  color:#14191e;
  background-color:#edf0f2
}
#login-area{float:right}
.header-unlogin li{float:left}
.header-app a,.header-signin a,.header-signup a{
  display:block;
  width:60px;
  font-size:14px;
  text-align:center;
  height:60px;
  line-height:60px;
  color:#787d82;
  transition:background-color .2s
}
.header-app .QR-download{
  display:none;
  position:absolute;
  top:72px;
  left:-57px;
  width:180px;
  height:166px;
  background:#fff;
  padding:16px 0 18px;
  text-align:center;
  webkit-box-shadow:0 2px 4px rgba(0,0,0,.2);
  -moz-box-shadow:0 2px 4px rgba(0,0,0,.2);box-shadow:0 2px 4px rgba(0,0,0,.2);
  z-index:9999
}
.header-app:hover .QR-download,.logined li>a{display:block}
.header-app .QR-download #app-text{
  margin:0;
  color:#14191e;
  font:700 14px/15px "微软雅黑";
  height:15px
}
.header-app .QR-download #app-type{
  margin:0;
  color:#787d82;
  font:12px/20px "微软雅黑";
  height:30px
}
.header-app .QR-download:before{
  content:" ";
  display:block;
  width:0;
  height:0;
  border-left:8px solid transparent;
  border-right:8px solid transparent;
  border-bottom:8px solid #fff;
  position:absolute;
  top:-8px;
  left:79px
}
.header-app .icon-appdownload{
  position:relative;
  top:2px;
  color:#787d82;
  font-weight:400
}
.header-app:hover .icon-appdownload{color:#fff}
.header-app a{font-size:22px}
.header-app a:hover{
  color:#fff;
  background-color:#363c41
}
.header-signin a:hover{
  color:#fff;
  background-color:#ec1500
}
.header-signup a:hover{
  color:#fff;
  background-color:rgba(77,85,93,.4)
}
.logined>li{float:left;position:relative}
#nav_list,.msg_icon,.myspace_remind{position:absolute}
.logined li>a{
  height:60px;
  line-height:60px;
  width:60px;
  color:#787d82;
  text-align:center;
  -webkit-transition:background-color .2s;
  -moz-transition:background-color .2s;
  transition:background-color .2s
}
.msg_icon,.my_message a span{display:none}
.logined li>a:hover{color:#fff;background-color:rgba(77,85,93,.4)}
.logined li>a:hover i{color:#fff}
.logined li>a>i{line-height:60px;color:#787d82;font-size:22px}
.my_message .msg_remind{
  display:none;
  position:absolute;
  width:6px;
  height:6px;
  background-color:#f01414;
  right:14px;
  top:14px;
  border-radius:50%
}
.msg_icon{
  padding:0 5px;
  height:16px;
  left:32px;
  top:10px;
  line-height:16px;
  background:#f01414;
  border-radius:50%;
  color:#fff;
  font-style:normal;
  font-size:10px
}
.my_mp span{display:block;line-height:16px;color:#6c7072}
.my_mp .mp{padding-top:12px;font-size:12px}
.my_mp a:hover .mp_num{color:#fff}
.set_btn{right:0}
.set_btn a.hover{background-color:#363d40}
.set_btn img{
  border-radius:50%;
  display:inline-block;
  background:url(/static/img/menu_icon.png) no-repeat
}
#nav_list{
  display:none;
  z-index:999;
  width:140px;
  top:60px;
  right:0;
  background:#363c41;
  list-style:none
}
#nav_list li a{
  border-top:1px solid #4a5153;
  height:39px;
  line-height:39px;
  font-size:14px;
  background-image:url(/static/img/menu_icon.png?t=10);
  background-repeat:no-repeat;
  display:block;
  color:#fff;
  text-align:left;
  padding:0 0 0 47px;
  width:auto
}
#nav_list a:hover{
  color:#fff;
  background-color:#4d5559
}
#nav_list #my_space{
  padding:0 18px;
  background-image:none;
  border:0;
  height:49px;
  line-height:49px;
  text-align:center
}
.bordered,.panel-heading{border-bottom:solid 1px #d0d6d9}
#nav_list .my_message{background-position:19px -46px}
#nav_list #my_note{background-position:19px -90px}
#nav_list #my_question{background-position:19px -128px}
#nav_list #my_setting{background-position:19px -167px}
#nav_list #my_logout{background-position:19px -207px}
.myspace_remind{
  width:10px;
  height:10px;
  background:url(/static/img/space-remind.png) no-repeat;
  top:10px;
  right:10px
}

.page{margin:25px 0 auto;overflow:hidden;clear:both;text-align:center}
.page-inner{padding:0 20px}
.page a,.page span,.page-disabled{
  padding:0 4px;
  min-width:24px;
  line-height:32px;
  font-size:14px;
  display:inline-block;
  text-align:center
}
.page a{
  margin:0 8px;
  color:#4d555d;
  border-radius:16px;
  -webkit-transition:border-color .2s;
  -moz-transition:border-color .2s;
  transition:border-color .2s
}
.page a.text-page-tag:hover{background:#d9dde1;color:#4d555d;text-decoration:none}
.page a.text-page-tag.active{background:#4d555d;color:#fff}
.panel,select{background-color:#fff}
.page span,.page-disabled{height:32px;color:#c8cdd2}
.page-first,.page-last{width:50px}
.page-next,.page-prev{width:70px}.progress,progress{width:400px;height:6px}
.page .notmargin{margin-right:0}
.panel{
  -webkit-box-shadow:0 2px 4px rgba(0,0,0,.2);
  -moz-box-shadow:0 2px 4px rgba(0,0,0,.2);
  box-shadow:0 2px 4px rgba(0,0,0,.2);
  padding:0 20px;
  color:#14191e;
  margin-bottom:20px
}
.panel-title{
  height:50px;
  line-height:50px;
  font-size:16px
}
select{
  margin:0;
  cursor:pointer;
  font-weight:400;
  border:1px solid #ccc;
  color:#555;
  display:inline-block;
  font-size:14px;
  height:30px;
  line-height:30px;
  padding:4px 6px
}
select:focus{
  outline:#333 dotted thin;
  outline:-webkit-focus-ring-color auto 5px;
  outline-offset:-2px
}
a.btn-add-collection{
  display:block;
  background:url(/static/img/course/new_add_collection.png) 46px top no-repeat;
  height:32px;
  color:#909b9e;
  text-align:center;
  line-height:35px
}
.progress,progress{
  display:inline-block
}
a.btn-add-collection:hover{
  background-position:46px -44px;
  color:#fff
}
a.btn-remove-collection{
  background-position:46px -88px;
  color:#909b9e
}
a.btn-remove-collection:hover{
  background-position:46px -130px
}
.course-title .btn-add-collection{
  margin-top:6px
}
.videohead .btn-add-collection{
  margin-top:20px
}
.js-btn-collection .concerned-icon{
  margin-top:34px;
  display:inline-block
}
progress{
  background:#f0f0f0;
  border:0;
  color:#aad94a
}
progress::-webkit-progress-bar{
  background:#f0f0f0
}
progress::-moz-progress-bar{
  background:#aad94a
}
progress::-webkit-progress-value{
  background:#aad94a
}
.progress{
  background:#f0f0f0
}
.progressBar{
  background:#aad94a;
  height:6px
}
.teacher-icon{
  width:7px;
  margin-left:5px;
  position:relative;
  top:1px
}
.elevator{
  position:fixed;
  padding:0 16px;
  bottom:150px;
  margin-top:-140px;
  right:0;
  z-index:999;
  background-color:#fff;
  box-shadow:0 4px 12px 0 rgba(7,17,27,.1)
}
.elevator a{
  display:block;
  width:26px;
  padding:16px 0;
  font-size:22px;
  line-height:20px;
  color:#b5b9bc;
  box-sizing:border-box;
  text-align:center;
  border-bottom:1px solid #edf1f2
}
.elevator a:hover{
  color:#14191e
}
.elevator a i{
  font-size:24px;
  color:#b5b9bc
}
.elevator a i:hover{
  color:#14191e
}
.elevator a span{
  display:none;
  font-size:12px;
  color:#f01414;
  line-height:12px
}
.elevator .no-goto{
  border-bottom:none
}
.elevator .elevator-app:hover i,.elevator .elevator-faq:hover i,.elevator .elevator-msg:hover i,.elevator .elevator-top:hover i,.elevator .elevator-weixin:hover i{
  display:none
}
.elevator .elevator-app:hover span,.elevator .elevator-faq:hover span,.elevator .elevator-msg:hover span,.elevator .elevator-top:hover span,.elevator .elevator-weixin:hover span{
  display:inline-block
}
.elevator .elevator-app-box{
  position:absolute;
  width:172px;
  height:212px;
  bottom:-2px;
  right:56px;
  -webkit-transition:opacity .25s,transform .3s;
  -moz-transition:opacity .25s,transform .3s;
  transition:opacity .25s,transform .3s;
  opacity:0;
  filter:alpha(opacity=0);
  max-width:0;
  -webkit-transform:scale(.01);
  -ms-transform:scale(.01);
  transform:scale(.01);
  -webkit-transform-origin:100% 95%;
  -ms-transform-origin:100% 95%;
  transform-origin:100% 95%;
  background:url(/static/img/common/elevator.png?t=2) 0 -220px no-repeat
}
.elevator .elevator-app:hover .elevator-app-box{
  display:block;
  visibility:visible;
  opacity:1;
  filter:alpha(opacity=100);
  max-width:none;
  -webkit-transform:scale(1);
  -ms-transform:scale(1);
  transform:scale(1)
}
.elevator .elevator-weixin-box{
  position:absolute;
  width:172px;
  height:212px;
  bottom:-4px;
  right:56px;
  -webkit-transition:opacity .25s,transform .3s;
  -moz-transition:opacity .25s,transform .3s;
  transition:opacity .25s,transform .3s;
  opacity:0;filter:alpha(opacity=0);
  max-width:0;
  -webkit-transform:scale(.01);
  -ms-transform:scale(.01);
  transform:scale(.01);
  -webkit-transform-origin:100% 95%;
  -ms-transform-origin:100% 95%;
  transform-origin:100% 95%;
  background:url(/static/img/common/elevator.png?t=2) no-repeat
}
.elevator .elevator-weixin:hover .elevator-weixin-box{
  display:block;
  visibility:visible;
  opacity:1;
  filter:alpha(opacity=100);
  max-width:none;
  -webkit-transform:scale(1);
  -ms-transform:scale(1);
  transform:scale(1)
}
.btn,.cpt-close i,.cpt-ct i,.cpt-handle a{
  display:inline-block
}
a,button,input{
  outline:0
}
a:active{
  star:expression(this.onFocus=this.blur())
}
button::-moz-focus-inner{
  border:0
}
input::-moz-focus-inner{
  border:0
}
.autowrap{
  word-wrap:break-word;
  word-break:break-all
}
.compatible-contianer{
  position:fixed;
  top:0;
  left:0;
  right:0;
  min-width:800px;
  height:30px;
  line-height:30px;
  background:url(/static/img/iebg.gif) repeat-x;
  z-index:999999
}
.cpt-ct{
  color:#363636;
  font-size:12px;
  text-align:center
}
.cpt-ct i{
  width:12px;
  height:14px;
  vertical-align:-2px;
  margin-right:5px;
  background:url(/static/img/iefixed-sprite.png) no-repeat
}
.cpt-ct a{
  color:#39b94e
}
.cpt-ct a:hover{
  text-decoration:underline
}
.cpt-handle{
  position:absolute;
  right:20px;
  top:0;
  font-size:12px;
  line-height:27px
}
.cpt-handle a{
  vertical-align:middle
}
.cpt-handle .cpt-agin{
  color:#656e73;
  margin-right:5px
}
.cpt-handle .cpt-agin:hover{
  color:#363d40
}
.cpt-close{
  width:16px;
  height:16px;
  text-align:center;
  line-height:16px;
  border-radius:50%;
  transition:.3s
}
.cpt-close:hover{
  background-color:#fc8800
}
.cpt-close i{
  height:8px;
  width:8px;
  vertical-align:1px;
  background:url(/static/img/iefixed-sprite.png) 0 -24px no-repeat
}
.cpt-close:hover i{
  background-position:0 -42px
}
.layer-usercard{
  position:absolute;
  z-index:999;
  width:370px;
  height:165px;
  background:#fff;
  box-shadow:0 2px 2px #999
}
.layer-usercard .arrow{
  position:absolute;
  left:65px;
  top:-11px;
  width:19px;
  height:11px;
  background:url(/static/img/dot_usercard.png)
}
.layer-usercard-header{
  height:110px;
  background:#2a2c2e
}
.btn,.btn.active,.btn:active{
  outline:0;
  background-image:none
}
.layer-usercard-header .avatar img{
  border-radius:50px;
  left:21px;
  position:absolute;
  top:21px;
  border:3px solid #7f8082
}
.layer-usercard-header dd,.layer-usercard-header dt{
  float:right;
  width:245px;
  padding-right:20px;
  color:#fff
}
.layer-usercard-header dt{
  padding-top:20px;
  font-size:18px
}
.layer-usercard-header dd{
  font-size:12px
}
.layer-usercard-info ul{
  overflow:hidden;
  padding-top:16px;
  height:32px;
  font-size:16px;
  color:#364247;
  position:relative
}
.layer-usercard-info li{
  float:left;
  padding:0 22px;
  border-right:1px solid #d9d9d9
}
.layer-usercard-info span{
  color:#969b9e;
  font-size:12px
}
.layer-usercard-info li.noborder{
  border:0
}
li.layer-usercard-medal{
  padding:0;
  top:12px;
  right:10px;
  width:117px;
  position:absolute;
  border:0
}
.layer-usercard-medal a{
  width:32px;
  height:32px;
  float:left;
  margin-right:5px;
  border-radius:1px;
  overflow:hidden
}
.ipt,select.ipt{
  height:20px;
  line-height:20px
}
.ipt{
  color:#14191e;
  background-color:#fff;
  border:1px solid #98a1a6;
  padding:9px;
  font-size:14px;
  border-radius:0;
  -webkit-transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;
  -moz-transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;
  transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;
  -webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075);
  -moz-box-shadow:inset 0 1px 1px rgba(0,0,0,.075);
  box-shadow:inset 0 1px 1px rgba(0,0,0,.075)
}
select[multiple].ipt,textarea.ipt{
  height:auto
}
.ipt:-moz-placeholder{
  color:#c8cdd2
}
.ipt::-moz-placeholder{
  color:#c8cdd2;
  opacity:1
}
.ipt:-ms-input-placeholder{
  color:#c8cdd2
}
.ipt::-webkit-input-placeholder{
  color:#c8cdd2
}
.ipt.placeholder{
  color:#c8cdd2
}
.ipt:focus{
  border-color:#000;
  outline:0;
  -webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(0,0,0,.4);
  -moz-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(0,0,0,.4);
  box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(0,0,0,.4)
}
.ipt.disabled,.ipt[disabled],.ipt[readonly]{
  cursor:default;
  background-color:#edf1f2;
  opacity:1
}
.btn,.btn-red{
  cursor:pointer
}
.ipt-error{
  color:#ec1500;
  border-color:#ec1500;
  -webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075);
  -moz-box-shadow:inset 0 1px 1px rgba(0,0,0,.075);
  box-shadow:inset 0 1px 1px rgba(0,0,0,.075)
}
.ipt-error:focus{
  border-color:#ec1500;
  outline:0;
  -webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(236,21,0,.4);
  -moz-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(236,21,0,.4);
  box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(236,21,0,.4)
}
.btn{
  margin-bottom:0;
  font-weight:200;
  text-align:center;
  vertical-align:middle;
  touch-action:manipulation;
  text-decoration:none;
  box-sizing:content-box;
  border:1px solid transparent;
  -webkit-appearance:none;
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none
}
.btn.focus,.btn:focus,.btn:hover{
  color:#fff;
  text-decoration:none
}
.btn.disabled,.btn[disabled],fieldset[disabled] .btn{
  pointer-events:none;
  opacity:.65;
  filter:alpha(opacity=65);
  box-shadow:none
}
.btn-red{
  color:#fff;
  background-color:#ec1500;
  border-color:#ec1500;
  border-style:solid;
  border-width:1px;
  -weibkit-transition:all .3s;
  -moz-transition:all .3s;
  transition:all .3s;
  width:138px;
  height:38px;
  line-height:38px;
  font-size:14px
}
.btn-blue,.btn-green{
  -moz-transition:all .3s;color:#fff;
  border-style:solid;
  border-width:1px;
  -weibkit-transition:all .3s;
  width:138px;
  height:38px;
  line-height:38px;
  font-size:14px
}
.btn-red:link,.btn-red:visited{
  color:#fff
}
.btn-red.focus,.btn-red:focus,.btn-red:hover{
  color:#fff;
  background-color:#ff2611;
  border-color:#ff2611
}
.btn-red.active,.btn-red:active{
  background-color:#d31300;
  border-color:#d31300
}
.btn-red.disabled,.btn-red.disabled.active,.btn-red.disabled.focus,.btn-red.disabled:active,.btn-red.disabled:focus,.btn-red.disabled:hover,.btn-red[disabled],.btn-red[disabled].active,.btn-red[disabled].focus,.btn-red[disabled]:active,.btn-red[disabled]:focus,.btn-red[disabled]:hover{
  cursor:default;
  box-shadow:none;
  background-color:#ec1500;
  border-color:#ec1500
}
.btn-blue{
  background-color:#08c;
  border-color:#08c;
  cursor:pointer;
  transition:all .3s
}
.btn-blue:link,.btn-blue:visited{
  color:#fff
}
.btn-blue.focus,.btn-blue:focus,.btn-blue:hover{
  color:#fff;
  background-color:#00a0f0;
  border-color:#00a0f0
}
.btn-blue.active,.btn-blue:active{
  background-color:#0077b3;
  border-color:#0077b3
}
.btn-blue.disabled,.btn-blue.disabled.active,.btn-blue.disabled.focus,.btn-blue.disabled:active,.btn-blue.disabled:focus,.btn-blue.disabled:hover,.btn-blue[disabled],.btn-blue[disabled].active,.btn-blue[disabled].focus,.btn-blue[disabled]:active,.btn-blue[disabled]:focus,.btn-blue[disabled]:hover{
  cursor:default;
  box-shadow:none;
  background-color:#08c;
  border-color:#08c
}
.btn-green{
  background-color:#00b33b;
  border-color:#00b33b;
  cursor:pointer;
  transition:all .3s
}
.btn-green:link,.btn-green:visited{
  color:#fff
}
.btn-green.focus,.btn-green:focus,.btn-green:hover{
  color:#fff;
  background-color:#00d747;
  border-color:#00d747
}
.btn-normal,.btn-normal:link,.btn-normal:visited{
  color:#787d82
}
.btn-green.active,.btn-green:active{
  background-color:#009a33;
  border-color:#009a33
}
.btn-green.disabled,.btn-green.disabled.active,.btn-green.disabled.focus,.btn-green.disabled:active,.btn-green.disabled:focus,.btn-green.disabled:hover,.btn-green[disabled],.btn-green[disabled].active,.btn-green[disabled].focus,.btn-green[disabled]:active,.btn-green[disabled]:focus,.btn-green[disabled]:hover{
  cursor:default;
  box-shadow:none;
  background-color:#00b33b;
  border-color:#00b33b
}
.btn-normal{
  background-color:#fff;
  border-color:#d0d6d9;
  border-style:solid;
  border-width:1px;
  cursor:pointer;
  -weibkit-transition:all .3s;
  -moz-transition:all .3s;
  transition:all .3s;
  width:138px;
  height:38px;
  line-height:38px;
  font-size:14px
}
.btn-normal.focus,.btn-normal:focus,.btn-normal:hover{
  color:#787d82;
  background-color:#edf1f2;
  border-color:#98a1a6
}
.btn-normal.active,.btn-normal:active{
  background-color:#f2f2f2;
  border-color:#c2cace
}
.btn-normal.disabled,.btn-normal.disabled.active,.btn-normal.disabled.focus,.btn-normal.disabled:active,.btn-normal.disabled:focus,.btn-normal.disabled:hover,.btn-normal[disabled],.btn-normal[disabled].active,.btn-normal[disabled].focus,.btn-normal[disabled]:active,.btn-normal[disabled]:focus,.btn-normal[disabled]:hover{
  cursor:default;
  box-shadow:none;
  background-color:#fff;
  border-color:#d0d6d9
}
.btn-sm{
  width:78px;
  height:28px;
  line-height:28px;
  font-size:12px
}
.send-area-result dd,.send-area-result dt{
  height:40px;
  line-height:40px
}
.send-area-result{
  background:#fff;
  box-shadow:0 0 8px rgba(0,0,0,.4);
  -moz-box-shadow:0 0 8px rgba(0,0,0,.4);
  -webkit-box-shadow:0 0 8px rgba(0,0,0,.4);
  position:absolute;
  top:58px;
  left:0;
  width:inherit
}
.send-area-result dt{
  font-size:12px;
  color:#c8cdd2;
  padding:0 10px
}
.send-area-result dd a.questiontitle{
  border:none;
  font-size:14px;
  color:#787d82;
  width:inherit;
  text-align:left;
  height:40px;
  line-height:40px;
  padding:0 10px;
  display:block
}
.oncurr{
  color:#14191e;
  background:#edf1f2
}
.send-area-result dd a.questiontitle em,.send-area-result dd a.questiontitle i{
  font-style:normal;
  font-size:12px;
  margin-left:10px
}
.send-area-result dd a.questiontitle em{
  color:#c8cdd2
}
.send-area-result dd a.questiontitle i{
  color:#00b33b
}
.g-user-card{
  position:absolute;
  right:0;
  top:100%;
  width:306px;
  visibility:hidden;
  box-shadow:0 4px 8px 0 rgba(7,17,27,.2);
  z-index:1000
}
.g-user-card .card-inner{
  background-color:#fff;
  box-shadow:0 4px 8px 0 rgba(0,0,0,.2);
  padding:24px;
  box-sizing:border-box
}
.g-user-card .card-top{
  color:#93999f;
  position:relative
}
.g-user-card .card-top img{
  float:left;
  width:72px;
  height:72px;
  border-radius:50%;
  border:2px solid #fff;
  margin-right:12px
}
.g-user-card .card-top .name{
  display:inline-block;
  font-size:16px;
  color:#07111b;
  width:170px
}
.g-user-card .card-top a{
  color:#93999f;
  display:inline-block
}
.g-user-card .card-top .setup{
  position:absolute;
  right:20px;
  top:33px;
  opacity:.6;
  filter:alpha(opacity=60);
  font-size:16px
}
.g-user-card .card-top .setup:hover{
  opacity:1;
  filter:alpha(opacity=100)
}
.g-user-card .card-top .card-top-right-box{
  margin-top:14px
}
.g-user-card .card-top .meta{
  font-size:12px!important
}
.g-user-card .card-top .meta a{
  margin-right:12px
}
.g-user-card .card-top .meta b{
  margin-left:2px
}
.g-user-card .user-center-box{
  margin-top:16px;
  margin-bottom:14px
}
.g-user-card .user-center-box ul li{
  position:relative;
  width:128px;
  width:127px\9;
  height:36px;
  background:#f3f5f7;
  line-height:36px;
  color:#4d555d;
  font-size:12px;
  margin-right:2px;
  margin-bottom:2px;
  box-sizing:border-box
}
.g-user-card .user-center-box ul li .user-center-icon{
  position:relative;
  top:3px;
  font-size:16px;
  margin-right:8px
}
.g-user-card .user-center-box ul li a{
  width:100%;
  height:36px;
  line-height:36px;
  padding-left:12px;
  text-align:left;
  box-sizing:border-box
}
.g-user-card .user-center-box ul li:hover,.g-user-card .user-center-box ul li:hover a{
  color:#4d555d;
  background:#d9dde1
}
.g-user-card .user-center-box ul li i{
  display:none;
  width:18px;
  height:18px;
  position:absolute;
  top:0;
  right:8px;
  background:url(/static/img/common/coupon-icon.png) no-repeat
}
.g-user-card .user-center-box ul li:nth-child(2n){
  margin-right:0
}
.g-user-card .card-links{
  position:relative;
  height:60px;
  line-height:60px
}
.g-user-card .card-links .split,.g-user-card .card-links a{
  position:absolute
}
.g-user-card .card-links .split{
  left:150px;
  top:0;
  margin-top:15px;
  width:1px;
  height:30px;
  background-color:#d9dde1
}
.g-user-card .card-links a{
  left:20px;
  top:0;
  font-weight:700
}
.g-user-card .card-links .my-sns{
  left:172px
}
.g-user-card .card-history,.g-user-card .card-links{
  margin-bottom:-1px;
  border-bottom:1px solid #edf1f2
}
.g-user-card .card-history{
  padding-bottom:16px
}
.g-user-card .card-history .history-item{
  display:block;
  position:relative;
  padding-left:24px;
  font-size:12px;
  color:#787d82;
  transition:background-color .2s
}
.g-user-card .card-history .history-item .tit{
  display:block;
  margin-bottom:8px;
  font-weight:700
}
.g-user-card .card-history .history-item .media-name{
  display:block;
  width:200px
}
.g-user-card .card-history .history-item .icon-clock{
  position:absolute;
  left:0;
  top:2px;
  font-size:16px;
  font-weight:700
}
.g-user-card .card-history .history-item .continue{
  position:absolute;
  right:0;
  top:26px;
  color:#00b43c
}
.g-user-card .card-history .history-item .continue:hover{
  color:#00c850
}
.g-user-card .card-sets{
  margin-top:16px;
  font-size:12px;
  line-height:12px
}
.g-user-card .card-sets a{
  color:#4d555d
}
.g-user-card .card-sets a:hover{
  color:#f01414;
  background:0 0
}
.shop-cart.hover .shop-cart-icon,.shop-cart:hover .shop-cart-icon span{
  color:#fff
}
.shop-cart:hover .shop-cart-icon,.user-card-box:hover .user-card-item{
  background-color:rgba(77,85,93,.4)
}
.g-user-card .card-sets .mr30{
  margin-right:30px
}
.g-user-card .card-arr{
  position:absolute;
  right:23px;
  top:2px;
  border-width:0 7px 8px;
  border-color:transparent transparent #f01400;
  border-style:solid
}
.shop-cart,.user-card-box{
  position:relative
}
.user-card-box.hover .g-user-card{
  visibility:visible
}
.user-card-box .user-card-item img{
  width:36px;
  height:36px;
  border-color:#4d5559;
  margin-top:-5px
}
.program-nav{
  padding-right:10px!important
}
.visible-xs-block{
  display:none
}
.shop-cart.hover .my-cart{
  display:block
}
.shop-cart{
  height:60px;
  line-height:60px
}
.shop-cart .shop-cart-icon{
  display:inline-block;
  width:107px!important;
  padding:0 18px;
  box-sizing:border-box
}
.shop-cart .shop-cart-icon span{
  color:#71777d;
  font-size:14px
}
.shop-cart .shop-cart-icon .icon-shopping-cart{
  position:relative;
  top:6px;
  font-size:24px
}
.shop-cart .shop-cart-icon .shopping_icon{
  position:absolute;
  padding:0 5px;
  height:16px;
  left:32px;
  top:10px;
  line-height:16px;
  background:#f01414;
  border-radius:50%;
  color:#fff;
  font-style:normal;
  font-size:10px
}
.shop-cart .my-cart{
  padding:0 12px;
  position:absolute;
  right:0;
  top:100%;
  width:350px;
  background:#fff;
  box-sizing:border-box;
  display:none;
  box-shadow:0 4px 8px 0 rgba(7,17,27,.2);
  z-index:99999
}
.shop-cart .my-cart .cart-title-box{
  padding:20px 12px;
  border-bottom:1px solid #d9dde1
}
.shop-cart .my-cart .cart-title-box h2{
  height:16px;
  font-size:16px;
  color:#07111b;
  line-height:16px
}
.shop-cart .my-cart .cart-title-box h5{
  height:16px;
  line-height:16px;
  font-size:12px;
  color:#93999f
}
.shop-cart .my-cart .cart-wrap .cart-wrap-box{
  height:284px;
  overflow-y:scroll
}
.shop-cart .my-cart .cart-wrap .cart-wrap-box ul{
  width:100%
}
.shop-cart .my-cart .cart-wrap .cart-wrap-box ul li{
  padding:12px 12px 8px;
  box-sizing:border-box;
  border-bottom:1px solid #d9dde1
}
.shop-cart .my-cart .cart-wrap .cart-wrap-box ul li:hover{
  background:#f3f5f7
}
.shop-cart .my-cart .cart-wrap .cart-wrap-box ul li:hover .del{
  display:block
}
.shop-cart .my-cart .cart-wrap .cart-wrap-box ul li a{
  width:auto;
  height:auto
}
.shop-cart .my-cart .cart-wrap .cart-wrap-box ul li img{
  width:100px;
  height:56px;
  margin-right:12px
}
.shop-cart .my-cart .cart-wrap .cart-wrap-box ul li .content-box{
  width:170px
}
.shop-cart .my-cart .cart-wrap .cart-wrap-box ul li .content-box h3{
  word-break:break-word;
  font-size:12px;
  color:#07111b;
  line-height:16px
}
.shop-cart .my-cart .cart-wrap .cart-wrap-box ul li .content-box p{
  margin-top:16px;
  height:12px
}
.shop-cart .my-cart .cart-wrap .cart-wrap-box ul li .content-box p span{
  color:#f01414;
  font-size:12px;
  line-height:12px
}
.shop-cart .my-cart .cart-wrap .cart-wrap-box ul li .del{
  display:none;
  cursor:pointer
}
.shop-cart .my-cart .cart-wrap .clear-cart{
  height:284px;
  text-align:center;
  margin-top:0 auto
}
.shop-cart .my-cart .cart-wrap .clear-cart .cartIcon{
  margin-top:36px;
  margin-bottom:12px;
  display:inline-block;
  width:60px;
  height:60px;
  line-height:60px;
  background:#93999f;
  font-size:36px;
  color:#fff;
  border-radius:50%
}
.shop-cart .my-cart .cart-wrap .clear-cart h3{
  margin:0 auto;
  width:180px;
  padding-bottom:24px;
  border-bottom:1px solid #d9dde1;
  color:#4d555d;
  font-size:14px;
  line-height:14px
}
.shop-cart .my-cart .cart-wrap .clear-cart .text{
  text-align:center;
  margin-top:24px;
  margin-bottom:16px;
  font-size:12px;
  line-height:12px;
  color:#93999f
}
.shop-cart .my-cart .cart-wrap .clear-cart .go-link{
  display:block;
  color:#f01414;
  font-size:12px;
  line-height:12px;
  margin-bottom:16px
}
.shop-cart .my-cart .more-box{
  padding:16px 12px;
  border-top:1px solid #d9dde1
}
.shop-cart .my-cart .more-box .show-box{
  height:38px;
  line-height:38px
}
.shop-cart .my-cart .more-box .show-box .num-icon{
  width:16px;
  height:16px;
  font-size:10px;
  color:#fff;
  line-height:10px;
  padding:3px 6px;
  border-radius:50%;
  background:#f01414;
  box-sizing:border-box
}
.shop-cart .my-cart .more-box .show-box .text{
  font-size:12px;
  color:#93999f
}
.shop-cart .my-cart .more-box .show-box .text a{
  color:#93999f
}
.shop-cart .my-cart .more-box .show-box .text a:hover{
  color:#f01414
}
.shop-cart .my-cart .more-box .show-box .go-pay a{
  color:#f01414;
  padding:0;
  font-size:12px
}
.shop-cart .my-cart .more-box .go-cart{
  color:#fff;
  font-size:12px;
  line-height:12px;
  font-weight:700;
  padding:12px 16px;
  border-radius:2px
}
.shop-cart .my-cart .more-box .go-cart:hover{
  background-color:#f04646
}
body .bk,div{
  background-size:cover
}
#main,#nav-item-index{
  display:none
}
#logo a,.hide-text,.logo a{
  text-indent:100%;
  overflow:hidden;
  white-space:nowrap
}
.idx-minwidth,body,html{
  min-width:1200px
}
body,html{
  height:100%;
  width:100%
}
body .bk{
  width:100%;
  height:490px;
  position:absolute;
  top:0;
  background-image:url(/static/img/index/bk.jpg)
}
.header,.header-wrap,.nav-item a,.w180andH30{
  position:relative
}
body{
  background-color:#fff
}
.shop-cart:hover .shop-cart-icon,.user-card-box:hover .user-card-item{
  background-color:transparent
}
.shop-cart:hover .shop-cart-icon span{
  color:#f01414
}
.shop-cart:hover .shop-cart-icon .shopping_icon{
  color:#fff
}
#nav{
  padding-right:10px
}
#logo a,.header-app:hover .QR-download,.logo a,.nav-item a{
  display:block
}
#logo a,.logo a{
  margin-top:-10px;
  height:80px;
  width:200px;
  background:url(/static/img/index/logo.png?t=1.1) center 0 no-repeat;
  background-size:100%
}
.nav-item a{
  padding:0 20px;
  color:#07111b;
  text-align:center;
  font-size:16px;
  height:60px;
  line-height:60px;
  -webkit-transition:background-color .3s;
  -moz-transition:background-color .3s;
  transition:background-color .3s
}
.nav-item .active a,.nav-item a.active,.nav-item a:hover{
  color:#f01414!important;
  background:0 0
}
.remind_warp .icon-notifi:hover{
  color:#f01414!important;
  background:no-repeat
}
.search-warp i:hover{
  color:#f01414
}
.search-warp .searchTags a{
  color:#93999f;
  background-color:#f3f5f7
}
.search-area{
  border:0 solid #fff;
  border-bottom:1px solid #d9dde1
}
.search-area .search-input{
  color:#71777d;
  background-color:transparent!important
}
.suggest-active .search-input{
  border-bottom:0
}
.header-app .icon-appdownload{
  font-weight:400;
  position:relative;
  top:2px
}
.header-app .icon-appdownload:hover{
  color:#f01414!important
}
.color-red,.header-app:hover .icon-appdownload,.logined li>a:hover i{
  color:#f01414
}
.header-app a{
  font-size:22px
}
.header-app a:hover,.header-signin a:hover,.header-signup a:hover,.logined li>a:hover{
  color:#f01414;
  background:0 0
}
.user-card-box .user-card-item img{
  width:32px;
  height:32px;
  border-color:#4d5559;
  margin-top:-5px
}
.set_btn img{
  border:0
}
.user-card-box:hover .user-card-item img{
  border:2px solid #f01414!important
}
.header{
  z-index:10;
  height:80px;
  top:-10px;
  opacity:0;
  filter:alpha(opacity=0)
}
.header-wrap{
  height:81px;
  margin:0 40px;
  padding:0 30px;
  background:url(/static/img/index/top-border.png) 0 bottom repeat-x
}
.mr0{margin-right:0!important}
.mt28{margin-top:28px!important}
.pt28{padding-top:28px!important}
.mb122{padding-bottom:122px!important}
.lh14{line-height:14px!important}
.h32{
  height:32px;
  overflow:hidden
}
.w652{width:652px!important}
.w180andH30{
  width:180px!important;
  height:30px!important;
  overflow:hidden
}
.h100{
  height:100%;
  overflow:hidden
}
.menuContent,.menuwrap{
  position:absolute;
  left:0;
  top:0;
  height:460px
}
.menuwrap{
  background-color:rgba(7,17,27,.5);
  opacity:.502;
  width:224px;
  z-index:1
}
.submenu .subinnerBox{
  width:730px;
  padding-left:40px;
  padding-right:40px;
  overflow:hidden;
  box-sizing:border-box
}
.submenu .subinnerBox .title{
  color:#07111b;
  font-size:16px;
  line-height:16px;
  margin-top:32px;
  font-weight:700;
  margin-bottom:13px
}
.submenu .subinnerBox .recommend{
  margin-top:33px;
  margin-bottom:16px
}
.submenu .subinnerBox a{
  color:#07111b;
  line-height:28px
}
.submenu a:hover{
  color:#f01414!important
}
.submenu .subinnerBox .title a:hover{
  color:#f01414
}
.menuContent{
  width:224px;
  z-index:2;
  padding-top:6px
}
.menuContent .item .box a:hover{
  color:#f01414!important
}
.menuContent .item{
  height:64px;
  line-height:66px;
  font-size:12px;
  cursor:pointer;
  padding:0 24px;
  position:relative
}
.menuContent .item > a{
  display:block;
  color:#fff;
  padding:0 8px;
  border-bottom:1px solid rgba(255,255,255,.2);
  height:63px
}
.menuContent .item i{
  position:absolute;
  right:32px;
  top:24px;
  color:rgba(255,255,255,.5);
  font-size:16px
}
.menuContent .item .box a{
  color:#fff!important
}
.menuContent .item:hover{
  background-color:rgba(7,17,27,.3)
}
.contentwrap .heigher,.contentwrap .longer,.contentwrap .normal,.outwrap-course,.outwrap-recomend,.php .longer .line,.submenu{
  background-color:#fff
}
.article .linkbtn{
  border:1px solid #fff;
  border-radius:3px;
  height:34px;
  font-size:14px;
  color:#fff;
  line-height:34px;
  text-align:center;
  margin:auto auto 8px;
  width:184px
}
.bbnone{
  border-bottom:none!important
}
.submenu{
  border-style:solid;
  border-width:1px;
  border-color:#d9dde1;
  position:absolute;
  left:224px;
  top:0;
  width:732px;
  height:460px;
  z-index:581;
  box-shadow:0 4px 8px 0 rgba(0,0,0,.1);
  box-sizing:border-box
}
.contentwrap{
  width:1200px;
  margin:auto
}
.contentwrap .classify{
  background-image:-moz-linear-gradient(-90deg,#ff2d50 0,rgba(255,87,115,.2) 100%);
  background-image:-webkit-linear-gradient(-90deg,#ff2d50 0,rgba(255,87,115,.2) 100%);
  background-image:-ms-linear-gradient(-90deg,#ff2d50 0,rgba(255,87,115,.2) 100%);
  float:left;width:224px;height:364px
}
.contentwrap .longer{
  width:468px;
  height:172px;
  float:left;
  font-size:20px;
  color:#fff;
  font-weight:700;
  text-align:center;
  line-height:172px;
  overflow:hidden
}
.android .longer,.java .longer{
  width:712px
}
.php .longer{
  width:468px;
  height:364px
}
.php .longer .line{
  opacity:.502;
  height:1px;
  width:206px;
  margin:20px auto
}
.band-bg,.band-inner,.char-icon1{
  opacity:0;
  filter:alpha(opacity=0)
}
.php .longer .subtitle{
  font-size:14px;
  color:#fff;
  text-align:center;
  line-height:14px
}
.php .longer .title{
  line-height:20px;
  margin-top:124px
}
.contentwrap .normal{
  width:224px;
  height:172px;
  float:left
}
.contentwrap .heigher{
  width:224px;
  height:364px;
  float:right;
  margin-right:0
}
.allshadow .classify,.allshadow .heigher,.allshadow .longer,.allshadow .normal{
  margin-top:20px;
  margin-right:20px;
  -webkit-box-shadow:0 5px 10px 0 rgba(0,0,0,.1);
  -moz-box-shadow:0 5px 10px 0 rgba(0,0,0,.1);
  box-shadow:0 5px 10px 0 rgba(0,0,0,.1);
  -webkit-transition:all .3s ease;
  -moz-transition:all .3s ease
}
.allshadow .classify{
  box-shadow:none!important
}
.allshadow .longer:hover,.allshadow .normal:hover,.heigher:hover,.recomendContent .box:hover{
  -webkit-box-shadow:0 5px 20px rgba(0,0,0,.3)!important;
  -moz-box-shadow:0 5px 20px rgba(0,0,0,.3)!important;
  box-shadow:0 5px 20px rgba(0,0,0,.3)!important
}
.contentwrap .recomend{
  line-height:16px;
  font-size:16px;
  color:#07111b;
  margin-top:42px;
  margin-bottom:24px
}
.outwrap-recomend{
  height:216px
}
.outwrap-course{
  height:258px
}
.outwrap-content{
  background-color:#f3f5f7;
  padding-bottom:60px
}
.contentwrap .recomendContent .box{
  background-color:#fff;
  float:left;
  width:224px;
  height:172px;
  margin-right:20px;
  -webkit-box-shadow:0 5px 10px 0 rgba(0,0,0,.1);
  -moz-box-shadow:0 5px 10px 0 rgba(0,0,0,.1);
  box-shadow:0 5px 10px 0 rgba(0,0,0,.1);
  position:relative
}
.contentwrap .recomendContent .box .new{
  position:absolute;
  top:-5px;
  left:-5px;
  width:34px;
  height:18px;
  background-image:url(/static/img/home/new.png);
  z-index:9
}
.contentwrap .recomendContent .box .box_bottom{
  position:absolute;
  bottom:0;
  width:100%;
  height:48px;
  background-color:#fff;
  color:#93999f;
  font-size:12px;
  line-height:44px
}
.contentwrap .recomendContent .box .box_body {
  position: absolute;
  width: 100%;
  height: 84px;
  bottom: 0;
  font-size: 14px;
  color: #07111b
}
.box_body{
  background-image:url(/static/img/home/normaljb.png?t=1)
}
.box_body_hover{
  background-image:url(/static/img/home/normaljb.png?t=1)!important
}
.contentwrap .recomendContent .box .box_body .title{
  width:184px;
  margin-top:16px;
  height:24px;
  min-height:24px;
  line-height:24px;
  overflow:hidden
}
.contentwrap .recomendContent .box .box_body .summary{
  width:184px;
  color:#93999f;
  font-size:12px;
  height:39px;
  overflow:hidden;
  margin-top:2px
}
.heigher .box_bottom,.normal .box_bottom{
  position:absolute;
  bottom:0;
  width:100%;
  height:48px;
  background-color:#fff;
  color:#93999f;
  font-size:12px;
  line-height:44px
}
.heigher .box_body,.heigher .box_bottom{bottom:192px}
.heigher .list{
  padding-top:11px;
  border-top:1px solid #d9dde1;
  font-size:12px;
  line-height:30px;
  width:184px;
  margin:auto;
  color:#07111b;
  position:relative;
  z-index:2;
  background:#fff
}
.heigher .list a:hover{
  color:#f01414!important
}
.heigher .list a:hover p:before{
  background:#f01414!important
}
.heigher .list p{
  position:relative;
  padding-left:12px
}
.heigher .list p:before{
  content:" ";
  display:inline-block;
  width:3px;
  height:3px;
  position:relative;
  left:-12px;
  top:-3px;
  background:#07111b
}
.heigher .box_body,.normal .box_body{
  position:absolute;
  width:100%;
  height:106px;
  font-size:16px;
  line-height:24px;
  color:#07111b;
  top:77px
}
.normal .box_body{
  bottom:0
}
.heigher .box_body .title,.normal .box_body .title{
  width:184px;
  margin-top:19px;
  min-height:24px;
  font-size:14px;
  height:24px;
  overflow:hidden
}
.heigher .box_body .summary,.normal .box_body .summary{
  width:184px;
  color:#93999f;
  font-size:12px;
  line-height:19px;
  height:40px;
  margin-top:2px;
  overflow:hidden
}
.contentwrap .recomendContent .box:last-child{
  margin-right:0
}
.submenu .innerBox{
  width:100%;
  height:100%;
  position:relative
}
.submenu .innerBox .bk img{
  position:absolute;
  bottom:0;
  right:-1px
}
.web .classify{
  background-image:url(/static/img/home/Web.png?t=1);
  position:relative
}
.article .classify{
  background-image:url(/static/img/home/shoujileft.png?t=1)
}
.classify p{
  font-size:12px;
  line-height:12px;
  color:#fff;
  margin-left:20px;
  margin-top:24px
}
.classify .title{
  font-size:32px;
  line-height:36px;
  color:#fff;
  font-weight:700;
  margin-top:28px
}
.career-path .path-triangle,.classify .career-path{
  font-size:16px;
  line-height:16px;
  color:#fff
}
.classify .career-path{
  display:block;
  margin:34px 0 0 20px
}
.classify .career-path:hover .path-triangle{
  margin-left:4px
}
.classify .raise-weapon{
  position:absolute;
  bottom:16px;
  margin-left:20px
}
.classify .raise-weapon .item{
  display:block;
  margin-top:0;
  font-size:12px;
  line-height:28px;
  color:#fff;
  width:184px;
  height:28px;
  overflow:hidden
}
.web .classify .raise-weapon .item{
  color:#c03
}
.web .classify .raise-weapon .item:hover{
  color:#ff0040
}
.linux .classify{
  height:172px;
  background-image:url(/static/img/home/Linux.png?t=1);
  position:relative
}
.java .classify{
  background-image:url(/static/img/home/Java.png?t=1);
  position:relative
}
.java .classify .raise-weapon .item{
  color:#069
}
.java .classify .raise-weapon .item:hover{
  color:#08c
}
.php .classify{
  background-image:url(/static/img/home/PHP.png?t=1);
  position:relative
}
.php .classify .raise-weapon .item{color:#339}
.php .classify .raise-weapon .item:hover{
  color:#4343cc
}
.android .classify{
  background-image:url(/static/img/home/Android.png?t=1);
  position:relative
}
.android .classify .raise-weapon .item{
  color:#063
}
.android .classify .raise-weapon .item:hover{
  color:#00994d
}
.ios .classify{
  background-image:url(/static/img/home/iOS.png?t=2);
  position:relative
}
.ios .classify .raise-weapon .item{
  color:#066
}
.ios .classify .raise-weapon .item:hover{
  color:#099
}
.article .longer .left{
  float:left;
  width:82px;
  margin:32px;
  height:60px;
  font-size:20px;
  color:#07111b;
  line-height:20px;
  font-weight:700
}
.article .longer .right{
  float:right;
  margin-right:32px;
  text-align:left;
  width:290px;
  margin-top:23px
}
.article .longer .right a{
  font-size:14px;
  line-height:32px;
  color:#07111b;
  font-weight:400
}
.article .longer .right a:hover{
  color:#f01414
}
.menuContent .item .group{
  font-size:16px
}
.menuContent .item .detail{
  line-height:12px;
  margin-top:14px
}
.mr15{margin-right:15px}
p{
  word-break:break-all
}
.logo-wrap{
  position:absolute;
  left:30px;
  top:11px;
  line-height:1em
}
.header-mid{
  width:100%;
  text-align:center
}
.header-right{
  position:absolute;
  right:0;
  top:0
}
.header-mid li{
  display:inline-block;
  margin:0 10px;
  white-space:nowrap
}
.header-right-item{
  margin:0 10px;
  float:left
}
.header-mid a,.header-mid a:visited,.header-right-item>a,.header-right-item>a:visited{
  display:block;
  height:80px;
  font-size:14px;
  line-height:80px;
  padding:0 10px;
  transition:.3s;
  color:#656e73;
  border-bottom:1px solid transparent
}
.header-mid a:active,.header-mid a:hover,.header-right-item>a:active,.header-right-item>a:hover{
  color:#fff;
  border-color:#be3948
}
.icon-right2,.more{
  color:#4d555d;
  position:relative
}
.icon-right2{
  font-size:16px;
  top:2px
}
.more{
  font-size:14px;
  font-weight:400;
  top:-4px
}
.more:hover{
  color:#93999f
}
.more:hover .icon-right2{
  color:#b7bbbf
}
.header-right-item a:hover .header-app-icon{
  background-position:0 -16px
}
.header-message{
  position:relative
}
.header-message b{
  display:inline-block;
  width:20px;
  height:18px;
  background:url(/static/img/imc.png) 0 -28px no-repeat
}
.header-message:hover b{
  background-position:0 0
}
.header-message .msg_icon{
  -webkit-text-size-adjust:none;
  line-height:16px;
  left:21px;
  top:20px
}
.index_mp span{
  display:block;
  line-height:16px;
  color:#6c7072
}
.band-btn,.band-video{
  line-height:0;
  text-align:center
}
.index_mp .mp{
  padding-top:25px;
  font-size:12px
}
.index_mp a:hover .mp_num{
  color:#fff
}
.header-user{
  position:relative
}
.header-user-avator img{
  border-radius:50%;
  vertical-align:middle
}
.header-user #nav_list{top:80px}
.idx-width{
  width:1200px;
  margin:0 auto
}
.band{
  position:relative;
  height:100%;
  max-height:950px;
  overflow:hidden;
  margin-top:-81px;
  background-color:#240d1f
}
.band-bg{
  position:absolute;
  left:0;
  top:0;
  right:0;
  bottom:0;
  z-index:1;
  background:url(/static/img/index/index-band.jpg) center 0 no-repeat;
  background-size:auto 100%
}
.band-wrap{
  position:relative;
  z-index:9;
  height:100%
}
.band-inner{
  position:absolute;
  left:50%;
  margin-left:-85px;
  bottom:0
}
.band-title{
  display:none
}
.band-btn a,.band-video span{
  display:inline-block;
  cursor:pointer
}
.band-video{
  padding-top:24px
}
.band-video span{
  height:16px;
  width:76px;
  background:url(/static/img/index/top-sprite.png) 0 -58px no-repeat
}
.band-btn a{
  width:170px;
  height:48px;
  background:url(/static/img/index/top-sprite.png) no-repeat
}
.video-container{
  position:fixed;
  left:0;
  top:0;
  right:0;
  bottom:0;
  z-index:9999;
  display:none
}
.char-icon1,.video-close,.video-mask,.video-wrap{
  position:absolute
}
.video-wrap{
  top:50%;
  left:50%;
  margin-top:-250px;
  margin-left:-400px;
  width:800px;
  height:500px;
  z-index:10001
}
.video-mask{
  top:0;
  left:0;
  bottom:0;
  right:0;
  background-color:#000;
  opacity:.8;
  filter:alpha(opacity=80);
  z-index:10000
}
.video-close{
  right:40px;
  top:40px;
  width:58px;
  height:58px;
  cursor:pointer;
  background:url(/static/img/index-close.png) no-repeat;
  z-index:10001
}
.video-close:hover{
  background-position:0 -68px
}
.bg-grey{
  background-color:#eef1f2
}
.bg-white,.characters{
  background-color:#fff
}
.characters-wrap{
  position:relative;
  padding:50px 120px;
  height:183px
}
.char-icon1{
  left:120px;
  top:60px;
  width:135px;
  height:183px;
  background:url(/static/img/char-icon1.png) center center no-repeat
}
.char-icon2,.char-icon3{
  position:absolute;
  opacity:0;
  filter:alpha(opacity=0);
  height:181px
}
.char-icon3{
  top:65px;
  right:120px;
  width:166px;
  background:url(/static/img/char-icon3.png) center center no-repeat
}
.char-icon2{
  top:60px;
  left:50%;
  margin-left:-90px;
  width:180px;
  background:url(/static/img/char-icon2.png) center center no-repeat
}
.intro1-wrap{
  position:relative;
  height:400px;
  z-index:1
}
.intro1-star,.intro1-video{
  width:581px;
  height:431px;
  left:-15px;
  position:absolute;
  opacity:0;
  filter:alpha(opacity=0)
}
.intro1-star{
  top:-20px;
  z-index:10;
  background:url(/static/img/01-star.png) no-repeat
}
.intro1-video{
  bottom:-30px;
  z-index:9;
  background:url(/static/img/01-video.png) no-repeat
}
.intro1-text{
  position:absolute;
  right:105px;
  top:164px;
  opacity:0;
  filter:alpha(opacity=0);
  width:493px;
  height:70px;
  background:url(/static/img/01-text.png) no-repeat
}
.intro2{
  position:relative;
  z-index:21
}
.intro2-wrap{
  position:relative;
  height:400px
}
.intro2-computer1,.intro2-computer2,.intro2-text{
  position:absolute;
  opacity:0;
  filter:alpha(opacity=0)
}
.intro2-text{
  top:165px;
  left:105px;
  width:512px;
  height:70px;
  background:url(/static/img/02-text.png) no-repeat
}
.intro2-computer1,.intro2-computer2{
  width:580px;
  height:430px;
  top:-30px;right:0
}
.intro2-computer1{
  background:url(/static/img/02-computer1.png) center 0 no-repeat;
  z-index:9;top:0
}
.intro2-computer2{
  background:url(/static/img/02-computer2.png) center 0 no-repeat;
  z-index:10
}
.intro3{position:relative;z-index:31}
.intro3-wrap{
  position:relative;
  height:400px;
  z-index:3
}
.intro3-text{
  position:absolute;
  width:476px;
  height:70px;
  right:165px;
  top:165px;
  opacity:0;
  filter:alpha(opacity=0);
  background:url(/static/img/03-text.png) no-repeat
}
.intro3-calendar,.intro3-rockets,.intro3-smoke{
  position:absolute;
  left:0;
  top:-1px;
  width:581px;
  height:431px;
  opacity:0;
  filter:alpha(opacity=0)
}
.intro3-calendar{
  background:url(/static/img/03-calendar.png) no-repeat
}
.intro3-rockets{
  top:14px;
  background:url(/static/img/03-rockets.png) no-repeat
}
.intro3-smoke{
  background:url(/static/img/03-smoke.png) no-repeat
}
.intro4{
  position:relative;
  z-index:41
}
.intro4-wrap{
  position:relative;
  height:400px;
  z-index:4
}
.intro4-text{
  position:absolute;
  width:422px;
  height:70px;
  top:165px;
  left:146px;
  opacity:0;
  filter:alpha(opacity=0);
  background:url(/static/img/04-text.png) no-repeat
}
.intro4-hand,.intro4-icon{
  position:absolute;
  right:0;
  top:-30px;
  width:581px;
  height:430px
}
.intro4-hand{
  z-index:9;
  opacity:0;
  top:0;
  filter:alpha(opacity=0);
  background:url(/static/img/04-hand.png) no-repeat
}
.intro4-icon{
  z-index:10;
  opacity:0;
  filter:alpha(opacity=0);
  background:url(/static/img/04-icon.png) no-repeat
}
.dynamic{
  position:relative;
  z-index:51
}
.dynamic-wrap{
  position:relative;
  height:200px;
  overflow:hidden;
  z-index:5
}
.dynamic-left,.dynamic-right{
  position:absolute;
  width:40px;
  height:200px;
  top:0;
  display:none;
  cursor:pointer;
  background:url(/static/img/index-sprite.png) no-repeat;
  z-index:10
}.dynamic-left{
   left:0;
   background-position:0 0
 }
.dynamic-right{
  right:0;
  background-position:right 0
}
.dynamic-group{
  position:absolute;
  left:0;
  right:0
}
.dynamic-group li{
  float:left;
  width:400px;
  overflow:hidden
}
.dynamic-group a{
  display:block;
  border-left:1px solid #fff;
  opacity:.85;
  filter:alpha(opacity=85);
  transition:opacity .3s
}
.dynamic-group a:hover{
  opacity:1;
  filter:alpha(opacity=100)
}
.icourse-title{
  text-align:center;
  width:64px;
  height:31px;
  margin:0 auto;
  font-size:32px;
  padding:40px 0 30px;
  line-height:1em;
  background:url(/static/img/course-text.png) center center no-repeat
}
.icourse-course li{
  position:relative;
  float:left;
  width:280px;
  margin:10px;
  height:240px;
  background:#f7faf9;
  border-bottom:2px solid #f7faf9;
  border-radius:0 0 1px 1px;
  box-shadow:0 1px 2px #c5c5c5;
  transition:.3s;
  -moz-transition:.3s;
  -webkit-transition:.3s;
  -o-transition:.3s
}
.icourse-img{
  position:relative;
  height:160px;
  overflow:hidden
}
.icourse-img img{
  transition:.3s;
  -moz-transition:.3s;
  -webkit-transition:.3s;
  -o-transition:.3s;
  line-height:1em
}
.icourse-intro,.icourse-learnt,.icourse-tips{
  position:absolute;
  left:0;right:0;
  font-size:12px;
  transition:.3s
}
.icourse-learnt{
  background-color:#39b94e;
  bottom:-19px;
  color:#fff;
  height:24px;
  line-height:24px;
  text-align:center;
  -moz-transition:.3s;
  -webkit-transition:.3s;
  -o-transition:.3s
}
.icourse-course li:hover{
  border-bottom:2px solid #dae0e5;
  box-shadow:0 2px 8px #bbb
}
.icourse-course li:hover img{
  transform:scale(1.2);
  -webkit-transform:scale(1.2)
}
.icourse-intro,.icourse-tips{
  top:160px;
  padding:0 14px;
  height:78px;
  background:#f7faf9;
  -moz-transition:.3s;
  -webkit-transition:.3s;
  -o-transition:.3s;
  z-index:9
}
.icourse-intro{
  opacity:0;
  z-index:10;
  display:none
}
.icourse-intro p{
  padding-top:10px;
  height:40px;
  line-height:20px;
  overflow:hidden
}
.icourse-intro span,.icourse-tips span{
  color:#b4bbbf
}
.icourse-tips h2{
  color:#363d40;
  line-height:50px;
  height:50px;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  text-align:center;
  font-size:14px
}
.icourse-course li:hover .icourse-intro{
  color:#656e73;
  opacity:1;
  display:block
}
.icourse-course li:hover .icourse-learnt{
  bottom:0
}
.icourse-footer{
  padding:40px 0 60px;
  text-align:center
}
.icourse-footer a{
  display:inline-block;
  width:118px;
  border-radius:50px;
  height:38px;
  line-height:38px;
  border:1px solid #d0d6d9;
  font-size:16px;
  color:#363d40;
  transition:.3s;
  -moz-transition:.3s;
  -webkit-transition:.3s;
  -o-transition:.3s
}
.icourse-footer a:hover{
  background-color:#d0d6d9
}
.family{
  position:relative;
  background:url(/static/img/family-bg2.png) center center repeat-x
}
.family-item{
  position:relative;
  float:left;
  width:200px;
  height:200px
}
.family-sub-item{
  position:relative;
  float:left;
  width:100px;
  height:100px
}
.family-info{
  display:none;
  position:absolute;
  top:0;
  bottom:0;
  background-color:#be3948;
  left:100%;
  z-index:12
}
.family-info-t{
  width:300px
}
.family-info-s{
  width:200px
}
.family-info-right{
  right:100%;
  left:auto
}
.family-big-mask,.family-mask{
  left:0;
  top:0;
  bottom:0;
  right:0
}
.family-avator{
  line-height:0;
  position:relative;
  display:block
}
.family-student-nick,.family-teacher-nick{
  color:#fff;
  white-space:nowrap;
  text-overflow:ellipsis;
  line-height:1em;
  overflow:hidden
}
.family-mask{
  position:absolute;
  opacity:.6;
  filter:alpha(opacity=60);
  background-color:#a8acaf;
  transition:opacity .15s;
  -moz-transition:opacity .15s;
  -webkit-transition:opacity .15s;
  -o-transition:opacity .15s
}
.family-avator:hover .family-mask{
  opacity:0;
  filter:alpha(opacity=0)
}
.family-big-mask{
  position:absolute;
  opacity:.6;
  filter:alpha(opacity=60);
  background-color:#edf1f4;
  z-index:10
}
.family-text{
  position:absolute;
  width:238px;
  height:46px;
  top:50%;
  left:50%;
  background:url(/static/img/family-text.png) no-repeat;
  margin:-23px 0 0 -119px;
  z-index:11
}
.family-teacher-nick{
  font-size:20px;
  padding:20px 20px 0
}
.family-student-nick{
  font-size:16px;
  padding:10px 20px 0
}
.family-info-job{
  font-size:12px;
  color:#ec9ba4;
  height:28px;
  overflow:hidden;
  padding:0 20px
}
.family-info-desc{
  padding:20px 20px 0;
  line-height:20px;
  height:100px;
  color:#f2bcc2;
  font-size:12px;
  overflow:hidden
}
.family-info-foot{
  padding:7px 20px 0;
  font-size:12px;
  color:#ec9ba4;
  line-height:1.3em
}
.family-info-foot span{
  display:inline-block;
  width:70px
}
.family-info-foot span:first-child{
  width:85px
}
.family-info-foot em{
  display:block;
  color:#fff
}
.mobile{
  background:url(/static/img/mobile-bg.png)
}
.mobile-wrap{
  position:relative;
  overflow:hidden;
  height:580px
}
.mobile-title{
  width:347px;
  height:31px;
  margin:80px auto 0;
  background:url(/static/img/phone-text.png) no-repeat
}
.mobile-entry{
  text-align:center;
  padding:40px
}
.mobile-entry a{
  width:158px;
  height:38px;
  line-height:38px;
  border-radius:50px;
  color:#be3948;
  transition:.3s;
  -moz-transition:.3s;
  -webkit-transition:.3s;
  -o-transition:.3s;
  border:1px solid #be3948;
  margin:0 10px
}
.mobile-entry a:hover{
  color:#fff;
  background-color:#be3948
}
.mobile-trigger{
  width:18px;
  height:18px;
  cursor:pointer;
  background:url(/static/img/index2-sprite.png) 1px -27px no-repeat
}
.mobile-trigger:hover{background-position:0 0}
.mobile-bg-wrap{
  position:absolute;
  bottom:-30px;
  left:50%;
  margin-left:-300px;
  width:600px;
  height:360px;
  background:url(/static/img/mobile-bg1.png) no-repeat
}
.mobile-bg2{
  position:absolute;
  width:184px;
  height:216px;
  top:190px;
  left:209px;
  background:url(/static/img/mobile-bg2.png) no-repeat
}
.mobile-bg3{
  position:absolute;
  width:140px;
  height:140px;
  top:173px;
  left:230px;
  opacity:0;
  filter:alpha(opacity=0);
  background:url(/static/img/mobile-bg3.png) no-repeat
}
.joinmooc{height:360px;overflow:hidden}
.joinmooc-wrap h1{
  width:297px;
  height:30px;
  background:url(/static/img/join-text.png) no-repeat;
  padding-top:1px;
  margin:110px auto 0
}
.joinbtn{
  padding-top:40px;
  text-align:center
}
.joinbtn a{
  height:60px;
  line-height:60px;
  width:220px;
  border-radius:50px;
  background:url(/static/img/begin-text.png) center center no-repeat #be3948;
  color:#fff;
  font-size:24px;
  transition:.3s;
  -moz-transition:.3s;
  -webkit-transition:.3s;
  -o-transition:.3s
}
.joinbtn a:hover{
  background-color:#cb616d
}

.friendly-link{
  height:50px;
  line-height:50px;
  border-bottom:1px solid #edf1f2;
  color:#c8cdd2;
  text-align:center
}
.friendly-link span{
  font-weight:700;
  margin-right:10px
}
.friendly-link a{
  color:#c8cdd2;
  margin:0 10px
}
.friendly-link a:hover{
  color:#14191e
}
.mk-mobile-bg{
  position:absolute;
  left:50%;
  bottom:0;
  margin-left:-402px;
  width:804px;
  height:307px;
  background:url(/static/img/index/mk-mobile-bg.png) center top no-repeat
}
.mk-down-qrcode{
  position:absolute;
  left:50%;
  bottom:86px;
  margin-bottom:-30px;
  margin-left:-208px;
  width:417px;
  height:192px;
  opacity:0;
  background:url(/static/img/index/mk-down-qrcode.png) center 0 no-repeat
}
.joinmooc h1{
  -webkit-transform:translate3d(0,-20px,0);
  transform:translate3d(0,-20px,0)
}
.joinbtn{
  -webkit-transform:translate3d(0,20px,0);
  transform:translate3d(0,20px,0)
}
.joinbtn,.joinmooc h1{
  -webkit-transition:all .6s ease;
  transition:all .6s ease;opacity:0
}
.joinmooc-active .joinbtn,.joinmooc-active h1{
  -webkit-transform:translate3d(0,0,0);
  transform:translate3d(0,0,0);opacity:1
}
.g-banner{
  position:relative;
  height:460px;
  overflow:hidden;
  width:1200px;
  margin:auto;
  background-color:#fff
}
.g-banner .banner-anchor{
  position:absolute;
  top:50%;
  margin-top:-50px;
  width:44px;
  height:80px;
  overflow:hidden;
  text-indent:-90em;
  background-image:url(/static/img/index/banner_sprite.png?1);
  background-repeat:no-repeat
}
.g-banner .next,.g-banner .prev{
  top:50%;
  height:80px;
  width:40px;
  background-image:url(/static/img/home/pre.png);
  background-position:center;position:absolute
}
.g-banner .next{
  right:0
}
.g-banner .prev{
  -moz-transform:rotate(180deg);
  -webkit-transform:rotate(180deg);
  transform:rotate(180deg);
  left:244px
}
.g-banner .next:hover,.g-banner .prev:hover{
  background-color:rgba(7,17,27,.5)
}
.g-banner .banner-slide{
  position:absolute;
  display:none;
  width:1200px;
  margin:auto;
  left:0;
  right:0;
  top:0;
  bottom:0;
  background-repeat:no-repeat;
  background-position:center 0
}
.g-banner .banner-slide .festival{
  position:absolute;
  top:450px;
  right:75px
}
.g-banner .banner-slide .festival a{
  display:block;
  width:190px;
  height:120px;
  background:url(/static/img/index/festival.png) 0 -120px no-repeat
}
.g-banner .banner-slide .festival a:hover{
  background-position:0 0
}
.g-banner .inner{
  position:relative;
  width:1200px;
  margin:0 auto
}
.g-banner .banner-dots{
  position:absolute;
  bottom:24px;
  left:0;
  right:0;
  text-align:right;
  padding-right:24px;
  line-height:12px
}
.g-banner .banner-dots span{
  display:inline-block;
  width:12px;
  height:12px;
  border-radius:50%;
  margin-left:8px;
  background-color:rgba(7,17,27,.4);
  transition:transform .2s;
  cursor:pointer;
  box-shadow:0 0 0 2px rgba(255,255,255,.8) inset
}
.g-banner .banner-dots span.active{
  box-shadow:0 0 0 2px rgba(7,17,27,.4) inset;
  background-color:#fff
}
.linux .moco-course-list{
  margin-left:0
}
.outwrap-content .contentwrap .heigher{
  margin-right:0
}
.outwrap-content .contentwrap .heigher .moco-course-wrap{
  height:363px;
  box-shadow:none;
  margin:0 20px 0 0
}
.outwrap-content .contentwrap .moco-course-wrap{
  margin:20px 20px 0 0
}
.cates-box .small-title{
  line-height:28px;
  color:#4d555d
}
.cates-box .tag-box{
  width:596px
}
.recomment-box .cate-tag{
  font-size:12px;
  background:#f3f5f7;
  height:20px;
  line-height:20px;
  color:#4d555d;
  padding:4px 8px;
  margin-right:8px
}
.recomment-box .path-recom,.recomment-box .path-recom a{
  color:#f01414
}
.recomment-box .path-recom .cate-tag{
  background:rgba(240,20,20,.1);color:#f01414
}
.recomment-box .path-recom a:hover{
  color:#f04646!important
}
.recomment-box p{
  margin-bottom:8px
}
.cart-color,.cart-color .red{
  background:linear-gradient(270deg,rgba(255,115,155,.7),#ff739b)
}
.cart-color .orange{
  background:linear-gradient(270deg,rgba(255,150,0,.7),#ff9600)
}
.cart-color .green{
  background:linear-gradient(270deg,rgba(0,185,90,.7),#00b95a)
}
.cart-color .cyan{
  background:linear-gradient(270deg,rgba(0,200,200,.7),#00c8c8)
}
.cart-color .blue{
  background:linear-gradient(270deg,rgba(75,150,220,.7),#4b96dc)
}
.cart-color .purple{
  background:linear-gradient(270deg,rgba(210,115,230,.7),#d273e6)
}
.course-card-container{
  width:224px;
  height:228px;
  border-radius:4px;
  background-color:#fff;
  position:relative;
  box-shadow:0 4px 8px 0 rgba(7,17,27,.1);
  transition:.3s all linear
}
.course-card-container .course-card-top i{
  float:left;
  font-size:16px;
  color:#fff;
  line-height:48px;
  margin-right:8px;
  display:none
}
.course-card-container.coding .course-card-top i{
  display:block
}
.course-card-container:hover{
  box-shadow:0 8px 16px 0 rgba(7,17,27,.2)
}
.g-banner,.path-banner{
  box-shadow:0 4px 8px 0 rgba(7,17,27,.1)
}
.course-card-container .course-cart-new{
  display:none;
  position:absolute;
  width:44px;
  height:24px;
  z-index:2;
  right:-5px;
  top:-4px
}
.course-card-container.new .course-cart-new{
  display:block
}
.course-card-container .course-card-bk{
  position:absolute;
  width:224px;
  height:228px;
  z-index:0;
  left:0;
  top:0;
  border-radius:4px;
  overflow:hidden;
  background-size:contain;
  background-repeat:no-repeat
}
.container-types .types-content-left,.path-card-container>a{
  background-size:cover;
  background-repeat:no-repeat;
  background-position:center center
}
.course-card-container .course-card-bk img{
  border-radius:4px
}
.course-card-container .course-card{
  display:block;
  position:relative;
  z-index:1;
  border-radius:4px;
  overflow:hidden
}
.course-card-container .course-card-top{
  height:48px;
  padding:0 20px;
  overflow:hidden
}
.course-card-container .course-card-top span{
  float:left;
  font-size:12px;
  font-weight:700;
  color:#fff;
  line-height:48px;
  margin-right:10px
}
.course-card-container .course-card-content{
  height:180px;
  background-color:#fff;
  padding:16px 24px;
  box-sizing:border-box
}
.course-card-container .course-card-name{
  font-size:14px;
  color:#07111b;
  line-height:24px;
  max-height:48px;
  word-break:break-all;
  word-wrap:break-word;
  overflow:hidden;
  text-overflow:-o-ellipsis-lastline;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  letter-spacing:-.1px
}
.course-card-container p{
  height:48px;
  word-break:normal;
  word-wrap:break-word;
  overflow:hidden;
  text-overflow:-o-ellipsis-lastline;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical
}
.container-types .lecturer-item .lecturer-name,.container-types .lecturer-item .lecturer-p{
  word-break:break-all;
  word-wrap:break-word;
  overflow:hidden;
  text-overflow:-o-ellipsis-lastline;
  -webkit-box-orient:vertical
}
.course-card-container .course-card-info,.course-card-container p{
  font-size:12px;
  color:#93999f;
  line-height:24px;
  margin:8px 0
}
.course-card-container .course-card-info{
  float:left;
  margin:0
}
.course-card-container .course-card-info span{
  margin:0 3px 0 4px;
  font-weight:800
}
.course-card-container .course-card-info i{
  font-style:normal
}
.course-card-container .course-card-bottom{
  position:absolute;
  bottom:24px;
  right:24px;
  left:24px;
  height:24px;
  line-height:24px;
  font-size:12px;
  text-align:right
}
.course-card-container .course-card-learning{
  position:absolute;
  width:40px;
  height:24px;
  font-size:12px;
  line-height:24px;
  color:#fff;
  background-color:#2b333b;
  font-weight:200;
  text-align:center;
  right:-4px;
  top:12px;
  z-index:1;
  border-top-left-radius:4px;
  border-bottom-left-radius:4px
}
.course-card-container .course-card-learning i{
  font-size:16px;
  line-height:24px
}
.course-card-container .course-card-learning:after{
  position:absolute;
  content:'';
  width:0;
  height:0;
  overflow:hidden;
  border-top:4px solid #2b333b;
  border-right:4px solid transparent;
  right:0;bottom:-4px
}
.course-card-container .course-card-price{
  float:right;
  color:#f01414;
  font-weight:200
}
.path-card-container{
  width:224px;
  height:228px;
  position:relative
}
.path-card-container>a{
  display:block;
  width:224px;
  height:228px;
  padding:24px;
  box-sizing:border-box;
  border-radius:4px
}
.path-card-container .path-cart-tit1{
  height:22px;
  line-height:20px;
  margin-bottom:12px
}
.path-card-container .path-cart-tit1 span{
  float:left;
  color:rgba(255,255,255,.6)
}
.path-card-container .path-cart-tit1 i{
  float:left;
  margin-right:10px;
  color:#fff;
  font-size:20px
}
.path-card-container .path-cart-tit2{
  color:rgba(255,255,255,.6);
  height:14px;
  line-height:14px;
  text-align:left;
  margin-bottom:10px
}
.path-card-container .path-cart-tit3{
  font-size:20px;
  font-weight:700;
  line-height:24px;
  color:#fff
}
.path-card-container .path-cart-more{
  margin-top:36px;
  color:#fff
}
.path-card-container .path-cart-more i,.path-card-container .path-cart-more span{
  float:left;
  margin-right:8px;
  line-height:14px;
  font-size:12px
}
.container-types,.path-banner{
  margin-left:auto;
  margin-right:auto
}
#main{
  display:block;
  padding-bottom:70px
}
.g-banner{
  border-top-left-radius:4px;
  border-top-right-radius:4px;
  background-color:#93999f
}
.path-banner{
  width:1200px;
  height:120px;
  border-bottom-left-radius:4px;
  border-bottom-right-radius:4px;
  overflow:hidden;
  background-color:#fff
}
.path-banner img{
  display:block;
  width:100%;
  height:100%;
  border:0
}
.path-banner>a{
  float:left;
  width:240px;
  height:120px;
  overflow:hidden;
  transition:.3s all
}
.path-banner>a:hover{
  margin-top:-4px
}
.container-types{
  width:1200px;
  padding-top:36px
}
.container-types .types-title{
  position:relative;
  font-size:20px;
  font-weight:200;
  color:#07111b;
  margin-bottom:24px;
  line-height:20px
}
.container-types .types-title .types-title-more{
  position:absolute;
  color:#93999f;
  font-size:14px;
  height:20px;
  top:0;
  right:10px
}
.container-types .types-title .types-title-more i,.container-types .types-title .types-title-more span{
  float:left;
  margin-right:7px;
  line-height:20px
}
.container-types .types-title .types-title-more i{
  font-size:16px
}
.container-types .index-card-container{
  float:left;
  margin-right:20px;
  border-radius:4px
}
.container-types .course-content-container{
  width:224px;
  height:228px
}
.container-types .types-content-recommended{
  position:absolute;
  bottom:0;
  width:224px;
  padding:0 24px 8px;
  box-sizing:border-box
}
.container-types .types-content-recommended .recommended-item{
  border-top:1px solid rgba(255,255,255,.4);
  padding:12px 3px
}
.container-types .types-content-recommended .recommended-item a{
  font-size:12px;
  color:#fff;
  line-height:28px;
  height:28px;
  display:inline-block;
  overflow:hidden;
  transition:.3s all;
  position:relative
}
.container-types .types-content-recommended .recommended-item a:hover{
  top:-2px
}
.container-types .types-content-left{
  position:relative;
  float:left;
  height:228px;
  border-radius:4px;
  margin-right:20px
}
.container-types .types-content-left.types-content-left-hmax{
  width:224px;
  height:348px
}
.container-types .types-content-left.types-content-left-hmax .advert-cart,.container-types .types-content-left.types-content-left-hmax .advert-cart img{
  height:348px
}
.container-types .types-content-right{
  float:right;
  float:left;
  width:956px
}
.container-types .types-content-banner{
  height:100px;
  margin-bottom:20px
}
.container-types .types-content-banner>a{
  float:left;
  margin-right:20px;
  position:relative
}
.container-types .index-card-container:last-child,.container-types .types-content-banner>a:last-child{
  margin-right:0
}
.container-types .types-content-banner img{
  display:block;
  width:468px;
  height:100px;
  border-radius:4px
}
.container-types .types-content-banner-one a,.container-types .types-content-banner-one img{
  width:100%
}
.container-types .advert-cart{
  float:left;
  width:224px;
  height:228px;
  overflow:hidden;
  box-sizing:border-box;
  transition:.3s all linear
}
.container-types .advert-cart img{
  display:block;
  width:224px;
  height:228px;
  border:none;
  outline:0
}
.container-types .advert-cart:hover{
  box-shadow:0 8px 16px 0 rgba(7,17,27,.2)
}
.container-types .article,.container-types .question{
  width:590px
}
.container-types .article-content,.container-types .question-content{
  height:446px;
  background-color:#fff;
  border-radius:4px;
  box-shadow:0 4px 8px 0 rgba(7,17,27,.1);
  position:relative;
  overflow:hidden
}
.container-types .article-content .hot-content,.container-types .question-content .hot-content{
  display:block;
  width:100%;
  height:100px;
  background-position:center center;
  background-size:contain;
  font-size:20px;
  line-height:100px;
  padding-left:40px;
  box-sizing:border-box;
  color:#fff
}
.container-types .article-content .hot-content:hover,.container-types .question-content .hot-content:hover{
  color:#fff
}
.container-types .article-content ul,.container-types .question-content ul{
  padding:32px
}
.container-types .article-content .content-more,.container-types .question-content .content-more{
  position:absolute;
  width:526px;
  height:58px;
  bottom:0;
  left:32px;
  text-align:right;
  font-size:14px;
  border-top:1px solid #d9dde1
}
.container-types .article-content .content-more a,.container-types .question-content .content-more a{
  float:right;
  margin-right:5px
}
.container-types .article-content .content-more a:hover,.container-types .question-content .content-more a:hover{
  color:#07111b
}
.container-types .article-content .content-more span,.container-types .question-content .content-more span{
  float:left;
  color:#93999f;
  line-height:58px
}
.container-types .article-content .content-more i,.container-types .question-content .content-more i{
  float:left;color:#b7bbbf;
  line-height:58px;
  margin-left:10px
}
.container-types li{
  margin-bottom:16px
}
.container-types li:last-child{
  margin-bottom:0
}
.container-types li .label{
  float:left;
  padding:5px 10px;
  background-color:#fff;
  font-size:12px;
  color:#4d555d;
  line-height:12px;
  border:1px solid #b9bdc1;
  border-radius:20px;
  margin-right:12px
}
.container-types li i{
  float:left;
  line-height:24px;
  margin-right:9px
}
.container-types li .content{
  float:left;
  color:#000;
  font-size:14px;
  line-height:24px
}
.container-types li .content:hover{
  color:#f01414
}
.container-types .lecturer-item{
  float:left;
  width:224px;
  height:320px;
  margin-right:20px;
  background-color:#fff;
  box-shadow:0 4px 8px 0 rgba(7,17,27,.1);
  box-sizing:border-box;
  padding:36px 24px 0;
  text-align:center;
  border-radius:4px;
  transition:.3s all linear
}
.container-types .lecturer-item:last-child{
  margin-right:0
}
.container-types .lecturer-item:hover{
  box-shadow:0 8px 16px 0 rgba(7,17,27,.2)
}
.container-types .lecturer-item .lecturer-uimg{
  display:block;
  width:120px;
  height:120px;
  margin:0 auto 10px;
  border-radius:50%
}
.container-types .lecturer-item .lecturer-name{
  display:block;
  font-size:16px;
  line-height:24px;
  color:#07111b;
  font-weight:700;
  -webkit-line-clamp:1
}
.container-types .lecturer-item .lecturer-title{
  display:block;
  font-size:12px;
  line-height:24px;
  color:#93999f;
  margin-bottom:15px
}
.container-types .lecturer-item .lecturer-p{
  display:block;
  font-size:12px;
  line-height:20px;
  color:#93999f;
  height:56px;
  -webkit-line-clamp:3
}
.friend-links{
  line-height:60px
}
.friend-links a{
  display:inline-block;
  margin-right:20px
}
.friend-links a:hover{
  text-decoration:underline;
  color:#000
}
.friend-links dl{
  padding:0 10px
}
.friend-links dd{
  float:left;
  width:160px
}
